<template>
  <div>
    <div class="work">
      <div class="title">日销售统计</div>
      <div class="content">
        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <div class="num">0</div>
              <div class="text">当日销售量(个)</div>
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <div class="num">0</div>
              <div class="text">当日销售额(个)</div>
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <div class="num">0</div>
              <div class="text">分成统计(个)</div>
            </div></el-col
          >
        </el-row>
      </div>
    </div>
    <div class="sale">
      <div class="title">销售统计</div>
      <div class="content">
        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <div class="num">{{ number }}</div>
              <div class="text">笔数统计(个)</div>
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <div class="num">{{ number4 }}</div>
              <div class="text">收入统计(万元)</div>
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <div class="num">{{ number3 }}</div>
              <div class="text">分成统计(个)</div>
            </div></el-col
          >
        </el-row>
      </div>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="合作商" prop="region">
        <el-select v-model="partnerName" placeholder="请选择" clearable>
          <el-option
            v-for="item in search"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择日期" required>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="margin: 20px 0 40px 0">
      <span
        >笔数统计：
        <p>{{ number }}</p>
        个</span
      >
      <span
        >收入统计：
        <p>{{ number2 }}</p>
        元</span
      >
      <span
        >分成统计：
        <p>{{ number3 }}</p>
        元</span
      >
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="订单日期" width="180">
      </el-table-column>
      <el-table-column prop="ownerName" label="合作商" width="180">
      </el-table-column>
      <el-table-column prop="ratio" label="分成比例"> </el-table-column>
      <el-table-column prop="orderTotalMoney" label="收入(元)" width="180">
      </el-table-column>
      <el-table-column prop="orderCount" label="笔数" width="180">
      </el-table-column>
      <el-table-column prop="totalBill" label="分成金额(元)" width="180">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :data="tableData"
        :total="+totalCount"
        @current-change="handleCurrentChange"
        layout="total,prev, pager, next"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getBill,
  getOrderCount,
  getOrderAmount,
  getTotalBill,
  getSearch
} from '@/api/bill'
export default {
  name: 'bill-page',
  data() {
    return {
      tableData: [],
      search: [],
      number: '',
      number2: '',
      number3: '',
      number4: '',
      value1: '',
      pageIndex: '',
      totalCount: '',
      partnerName: '',
      formInline: {
        user: '',
        region: '',
        date1: ''
      }
    }
  },
  methods: {
    async onSubmit() {
      const res = await getBill(this.pageIndex, this.pageSize, this.partnerName)
      this.tableData = res.currentPageRecords
      console.log(res.currentPageRecords)
    },
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageIndex = `${val}`
      const res = await getBill(this.start, this.end, this.pageIndex)
      this.tableData = res.currentPageRecords
      this.pageIndex = ''
    },
    async getBill() {
      const res = await getBill(this.start, this.end)
      this.tableData = res.currentPageRecords
      this.totalCount = res.totalCount
    },
    async getOrderCount() {
      const res = await getOrderCount()
      this.number = res
      console.log(this.number)
    },
    async getOrderAmount() {
      const res = await getOrderAmount()
      this.number2 = res * 0.01
      this.number4 = (res * 0.000001).toFixed(2)
      console.log(this.number2)
    },
    async getTotalBill() {
      const res = await getTotalBill()
      this.number3 = res * 0.01
      console.log(this.number3)
    },
    async getSearch() {
      const res = await getSearch()
      this.search = res.currentPageRecords
      console.log(this.search)
    }
  },
  created() {
    this.getBill()
    this.getOrderCount()
    this.getOrderAmount()
    this.getTotalBill()
    this.getSearch()
    this.handleCurrentChange()
    this.onSubmit()
  }
}
</script>

<style scoped lang="scss">
span {
  margin-right: 80px;
}
p {
  display: inline-block;
  font-size: 24px;
  color: red;
}
.work {
  float: left;
  width: 580px;
  height: 166px;
  background-color: #e9f3ff;
  background-image: url('@/assets/home1.png'), url('@/assets/q1.png');
  background-repeat: no-repeat;
  background-position: 0 0, calc(100% - 1px) 100%;
  border-radius: 5%;
  margin-right: 10px;
  margin-bottom: 20px;
  .title {
    color: #333333;
    font-size: 16px;
    padding: 20px 0px 20px 20px;
    font-weight: 700;
  }
  .content {
    margin-left: 33px;
    .num {
      font-size: 36px;
      color: #072074;
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
      font-weight: 700;
      margin: 0 !important;
    }
    .text {
      height: 17px;
      margin-top: 3px;
      font-size: 12px;
      font-weight: 400;
      color: #91a7dc;
      line-height: 17px;
    }
  }
}
.sale {
  float: left;
  width: 580px;
  height: 166px;
  background: #fbefe8 url('@/assets/q2.png') no-repeat calc(100% - 12px) 100%;
  border-radius: 5%;
  margin-bottom: 20px;
  .title {
    color: #333333;
    font-size: 16px;
    padding: 20px 0px 20px 20px;
    font-weight: 700;
    span {
      color: #999999;
      font-size: 12px;
      font-weight: 400;
    }
  }
  .content {
    margin-left: 60px;
    .num {
      font-size: 36px;
      color: #ff5757;
      text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
      font-weight: 700;
      margin: 0 !important;
    }
    .text {
      height: 17px;
      margin-top: 3px;
      font-size: 12px;
      font-weight: 400;
      color: #ff5757;
      line-height: 17px;
    }
  }
}
</style>
